<template>
    <view class="pageLayout">
      <u--form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="MyForm"
        labelWidth="150rpx"
        :labelStyle="labelStyle"
      >
        <view class="base_info">
          <u-form-item borderBottom>
            <view class="labelStyle" style="font-size: 24rpx">凭证</view>
            <custom-upload
              v-model="fileList"
              :max-count="2"
              @change="handleFileChange"
            />
          </u-form-item>
          <!-- <u-form-item labelPosition="top" prop="remark" borderBottom>
            <view class="labelStyle" style="font-size: 24rpx">申诉原因</view>
            <u--textarea
              v-model="form.remark"
              border="none"
              height="50"
              placeholder="请输入申诉原因：例如：客户非S客资，请重新分配"
            ></u--textarea>
          </u-form-item> -->
        </view>
      </u--form>
      <view class="btn_width">
        <u-button
          class="btn"
          :loading="loading"
          @click="submitForm"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;"
          >确定</u-button
        >
      </view>
      <mytoast ref="toastRef" />
    </view>
  </template>
    <script>
  import store from "../../store/index";
  import myPicker from "@/components/myPicker";
  import tagPicker from "@/components/tagPicker";
  import customUpload from "@/components/customUpload.vue";
  import mytoast from "@/components/mytoast.vue";
  import { matchCommitControversy } from "@/api/customer/index";
  export default {
    components: {
      myPicker,
      tagPicker,
      customUpload,
      mytoast,
    },
    data() {
      return {
        // imgUrl: "https://www.yinyaoit.com",
        id: "",
        showLinkPicker: false, //链接状态
        showLinkTypePicker: false, //链接类型
        showPayTypePicker: false, //链接类型
        showServiceTypePicker: false, //服务类型
        showLevelPicker: false, //SA分级
        showNotPicker: false, //签约结果
        showPicker: false, //
        isFillIn: false,
        loading: false,
        fileList: [],
  
        tagList: [
          { name: "需跟进", id: "需跟进", customerResourceTagLevel: "Record" },
          { name: "已添加微信", id: "已添加微信", key: "hasWeChat" },
          { name: "无效客资", id: "无效客资", key: "isInvalid" },
          { name: "高意向", id: "高意向", key: "isHignIntention" },
        ], // 标签列表
        labelStyle: {
          "font-size": "24rpx",
        },
        fontSize: "24rpx",
        inputAlign: "right",
        form: {
          remark: "",
          customerRemark: "",
          refundProvePath: "",
        },
        selectedItems: [],
        rules: {
          customerRemark: [
            {
              type: "string",
              required: true,
              message: "请输入客户原因",
              trigger: ["blur", "change"],
            },
          ],
        },
      };
    },
    computed: {
      hasLogin() {
        return this.$store.state.token && this.$store.state.token.length > 0;
      },
    },
    methods: {
      /**
       * 图片上传反馈
       * @param files 当前文件列表
       */
      handleFileChange(files) {
        console.log("当前文件列表:", files);
      },
      /**
       * 链接状态
       */
      changeLink(val) {
        console.log(val, "changeLink");
      },
      // /**
      //  * 获取客户信息
      //  */
      // getInfo() {
      //   queryCustomerResourceChangeLink({ customerResourceID: this.id }).then(
      //     (res) => {
      //       console.log(res.data, "res.data");
      //       this.form = res.data;
      //       if (res.data.linkProvePaths) {
      //         this.fileList = [
      //           {
      //             path: res.data.linkProvePaths,
      //             url: this.imgUrl + "/" + res.data.linkProvePaths,
      //             status: "success",
      //           },
      //         ];
      //       }
      //     }
      //   );
      // },
      /**
       * 表单提交
       */
      async submitForm() {
        if (this.fileList.length == 0) {
          uni.showToast({
            title: "请上传凭证",
            icon: "none",
            duration: 1500,
          });
          return;
        }
        let action = await this.$refs.MyForm.validate();
        if (action) {
          // return;
          let imgArr = this.fileList.map((item) => {
            return item.url;
          });
          let data = {
            ...this.form,
            matchProvePath: imgArr.toString(),
            customerResourceID: this.id,
          };
          console.log(data, "data");
          // return;
          matchCommitControversy(data)
            .then((res) => {
              uni.showToast({ title: "提交成功", icon: "none" });
              uni.navigateBack();
            })
            .catch((e) => {
              this.$refs.toastRef.showToast({
                msg: e.data.detail,
                duration: 3000,
                position: "center",
              });
            });
          console.log(this.form, "this.form");
        } else {
          uni.showToast({ title: "请完善表单", icon: "none" });
          return false;
        }
      },
      /**
       * 未签约原因选择器
       */
      closeNotPicker() {
        this.$nextTick(() => {
          this.showNotPicker = false;
          this.showLinkPicker = false;
          this.showLinkTypePicker = false;
          this.showPayTypePicker = false;
          this.showServiceTypePicker = false;
          this.showLevelPicker = false;
        });
      },
      /**
       * 标签选择器
       */
      handleConfirm(val) {
        this.$nextTick(() => {
          this.showPicker = false;
        });
      },
    },
    onLoad(options) {
      this.id = options.id;
      // this.getInfo();
    },
    onShow() {},
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.MyForm.setRules(this.rules);
    },
    /**
     * 上拉加载更多
     */
    onReachBottom() {},
  };
  </script>
    <style>
  page {
    background-color: #f5f7fb;
  }
  </style>
    
    <style lang="scss" scoped>
  .pageLayout {
    padding: 40rpx;
  }
  .base_info {
    background-color: #ffffff;
    padding: 24rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
  }
  .labelStyle {
    margin-bottom: 24rpx;
  }
  .submit-container {
    margin-top: 40rpx;
    padding: 20rpx;
    background-color: #f5f7fb;
  }
  .btn_width {
    width: 60%;
    margin: 60rpx auto;
  }
  </style>
    